<template>
    <div class="wechat-pay flex-center">
        <div class="pay-content">
            <div class="left flex-center-column">
                <p>支付金额:</p>
                <p class="amount">2000.00<span class="unit">元</span></p>
            </div>
            <div class="right flex-center-column">
                <div class="erweima" />
                <div class="text">用微信/支付宝/云闪付扫码付款</div>
                <div class="dashed-line" />
                <div class="step-tip flex-center-between">
                    <div class="step-item wechat" />
                    <div class="step-item alipay" />
                    <div class="step-item unionpay" />
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.wechat-pay {
  height: 100%;
  .pay-content {
    width: 683px;
    height: 421px;
    border-radius: 10px;
    background: #fff;
    display: flex;
  }
  .left {
    width: 199px;
    font-size: 23px;
    color: #27282a;
  }
  .amount {
    font-size: 34px;
    color: #ff1717;
    margin-top: 28px;
  }
  .unit {
    font-size: 23px;
  }
  .right {
    flex: 1;
    padding: 0 100px;
    background: #388dff;
    width: 100%;
    border-radius: 0 10px 10px 0;
  }
  .text {
    color: #fff;
    font-size: 20px;
    margin: 10px 0;
  }
  .erweima {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background: url("../../assets/erweima.png");
    object-fit: cover;
    background-size: 100% 100%;
  }
  .dashed-line {
    border-top: 1px dashed #fff;
    width: 100%;
  }
  .step-tip {
    font-size: 14px;
    color: #fff;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    .index {
      width: 14px;
      height: 14px;
      line-height: 14px;
      text-align: center;
      border-radius: 50%;
      background: #fff;
      color: #0eaa37;
    }
    .step-img {
      width: 20px;
      margin: 5px 0;
    }
  }
  .wechat {
    background: url("../../assets/wechat.png") no-repeat;
  }
  .alipay {
    background: url("../../assets/alipay.png") no-repeat;
  }
  .unionpay {
    background: url("../../assets/unionpay.png") no-repeat;
  }
  .step-item {
    font-size: 12px;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    object-fit: cover;
    background-size: 100% 100%;
  }
}
</style>